<template>
  <div>
    <table-title icon="el-icon-platform-eleme" title="管理员列表"></table-title>
    <!-- data 对接表格数组数据的属性 -->
    <el-table stripe border :data="adminList">
       <el-table-column label="用户名" prop="userName"></el-table-column>
       <el-table-column label="姓名" prop="turename"></el-table-column>
        <el-table-column label="权限" >
            <!-- scope.row 当前行 -->
            <template slot-scope="scope">
              <div>
                  {{scope.row.power=="1"?"系统管理员":"课程管理员"}}
              </div>
            </template>
        </el-table-column>
       <el-table-column label="注册日期" >
        <template slot-scope="scope">
          <div>
              {{new Date(scope.row.createAt).toLocaleString()}}
          </div>
        </template>
       </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
              <div>
                  <el-link type="primary" @click="toEdit(scope.row)">编辑</el-link>
                  <el-link type="danger" @click="todeladmin(scope.row.tokenId)">删除</el-link>
              </div>
            </template>
        </el-table-column>
    </el-table>
      <!-- 分页组件 -->
      <el-pagination background :total="total"
          :page-size="pageSize"
          :current-page="pageStart"
          @current-change="getPage"
      ></el-pagination>
  </div>
</template>

<script>
import {getAdminList,delAdminApi} from '../../../api/admin.js'
export default {
  name: 'Vuepro2209AdminTabel',

  data() {
    return {
      pageStart:1,//当前页码
      searchText:"",//搜索条件
      adminList:[],//返回的管理员列表数据
      total:0, //数据总条数
      pageSize:3//每页条数
    };
  },
created(){
    this.getList()
    // 监听兄弟组件传来的搜索条件  重新获取列表
    this.$bus.$on("sendSeaTxt",(val)=>{
      this.searchText=val;
       this.getList()
    })
},
  mounted() {
    
  },

  computed:{},
  methods: { 
    toEdit(row){ //点击编辑  给兄弟组件传值 row 并打开兄弟组件弹出层
      this.$bus.$emit('sendrow',row)
    },
    getPage(val){ //分页器改变事件
        // val --是当前页码
        console.log(val)
        this.pageStart=val; //改变了当前要发送给后台的页码
        this.getList()//重新获取最新的列表
    },
    async todeladmin(id){ //删除管理员
      // 删除接口
        let res=await delAdminApi(id)
        console.log(res)
        if(res.data.success){
            this.$message.success("删除成功")
            this.getList();
        }
    },
      async getList(){  //获取管理员列表接口
          let res=await getAdminList({
            pageStart:this.pageStart,
            searchText:this.searchText
          })
          this.adminList=res.data.data.list; //表格数据
          this.total=res.data.data.count;//数据总条数
          this.pageSize=res.data.data.pageSize;//每页的条数
          console.log(res)
      }
  },
};
</script>
<style lang="less">
    .el-link{
      margin-left:10px;
    }
</style>